<template>
  <div
    class="mian mian-color"
    :style="{'bottom': bottomis + 'px' }"
    v-show="hide"
  >
    <div class="head dif-juspb-alic">
      <p class="head-title">
        正在上传
        <span class="sp">(0/{{forlist.length}})</span>
      </p>
      <div class="icon-div">
        <i
          class="iconfont icon-jian icon"
          @click="hideView()"
        ></i>
        <i
          class="iconfont icon-guanbi icon"
          @click="hideView()"
        ></i>
      </div>
    </div>
    <div class="uploader-header">
      <div class="file-name">文件名</div>
      <div class="file-size file-text-width">大小</div>
      <div class="file-speed file-text-width">速度</div>
      <div class="file-path file-text-width">上传目录</div>
      <div class="file-stat file-text-width">取消</div>
    </div>
    <div class="uploader-list uploader-scroll">
      <div
        class="file-info"
        v-for="(item,index) in fileList"
        :key="index"
      >
        <div
          class="picture"
          :style="{'width': item.width + '%','background': item.error ? '#fcc4c49c':'#d5e8fc'}"
        ></div>
        <div class="file-xinxi">
          <div class="file-icon">
            <img
              v-if="item.iconClass"
              :src="item.iconClass"
              class="solist-img"
            >
            <svg
              v-else
              class="icon-symbol icon-svg-yasuobao"
              aria-hidden="true"
            >
              <use v-bind:xlink:href="item.iconSvg"></use>
            </svg>
            <span class="file-icon-title">{{item.title}}</span>
          </div>
          <div class="file-size file-text-width">{{item.size}}</div>
          <div class="file-speed file-text-width">{{item.speed}}</div>
          <div class="file-path file-text-width">{{item.path}}</div>
          <div class="file-stat-icon file-text-width">
            <!-- <div
              class="icon-width"
              @click='iconClick(index)'
            >
              <i
                class="iconfont icon"
                :class="item.iconClass"
              ></i>
            </div> -->
            <p v-if="item.error">上传失败</p>
            <div
              class="icon-width"
              v-else
            >
              <i
                class="iconfont icon-guanbi icon"
                @click='iconClick(index)'
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import emitbut from '@/common/emit/emiton'
import { Company, MapList } from '@/common/utils'
import axios from 'axios'
// 开始时间
let stime
// 上传的时间
let sloaded = [0]
// 上传完成
let uploadHttpList = []
const httptoken = []
export default {
  name: 'UploadList',
  data() {
    return {
      fileList: [],
      bottomis: 0,
      hide: false,
    }
  },
  created() {},
  mounted() {
    emitbut.$on('uploadshow', data => {
      this.fileList = this.forlist(data)
      this.showView()
      setTimeout(() => {
        this.uploadHttp()
      }, 1000)
    })
  },
  methods: {
    hideView() {
      this.bottomis = -435
      setTimeout(() => {
        this.hide = false
        // this.fileList = []
      }, 500)
    },
    // 显示
    showView() {
      this.hide = true
      setTimeout(() => {
        this.bottomis = 0
        // this.fileList = []
      }, 500)
    },
    forlist(arr) {
      let list = []
      for (let index = 0; index < arr.length; index++) {
        let iconSvg = arr[index].iconSvg == 2 ? URL.createObjectURL(arr[index].fileObj) : false
        let si = Math.ceil(arr[index].size / 1024)
        console.log(si)
        si = si >= 1024 ? Math.ceil(si / 1024) + 'MB' : si + 'KB'
        arr[index].size = si
        arr[index].iconClass = iconSvg
        list.push(arr[index])
      }
      return list
    },
    // 取消上传
    iconClick(index) {
      httptoken[index].cancel()
      this.fileList.splice(index, 1)
    },
    uploadHttp() {
      // 获取当前所在目录
      const bdl = this.$store.state.hostmodeule.breaDcrumbList
      const parent_file_id = bdl.length === 0 ? 0 : bdl[bdl.length - 1].id
      // 上传开始时间
      stime = new Date().getTime()

      this.fileList.forEach(async (item, index) => {
        try {
          // 创建 formdata 添加数据
          let formdata = new FormData()
          formdata.append('f1', item.fileObj)
          formdata.append('parent_file_id', parent_file_id)
          formdata.append('userid', this.$store.state.userinfo.id)
          // 创建请求的token
          let CancelToken = axios.CancelToken
          let source = CancelToken.source()
          // 保存请求token
          httptoken.push(source)
          const datas = await this.$http.host.postupload('/FileUploadList', formdata, source.token, e => {
            // 进度
            this.fileList[index].width = ((e.loaded / e.total) * 100).toFixed(2)
            // 正在上传的时间
            let getTime = new Date().getTime()
            // 时间差
            let dtiem = (getTime - stime) / 1000
            // 当前时间内上传的文件大小
            let sloadedindex = sloaded[index] || 0
            let dqsise = e.loaded - sloadedindex
            // 数量  /  时间  =  速度
            let speed = dqsise / dtiem
            this.fileList[index].speed = Company(speed)
            // 更新时间
            stime = new Date().getTime()
            // 重新赋值为当前上传的文件大小
            if (sloaded[index] === undefined) {
              sloaded.push(e.loaded)
            } else {
              sloaded[index] = e.loaded
            }
          })
          if (datas.data == 1) {
            this.$message.success(`${this.fileList[index].title}${datas.msg}`)
            // 记录文件上传成功
            uploadHttpList.push(datas.data)
            // 全部上传完成
            if (this.fileList.length == uploadHttpList.length) {
              this.$emit('uploadHttpEmit')
              // 重置
              stime = null
              sloaded = [0]
              uploadHttpList = []
            }
          }
        } catch (error) {
          console.log('上传错误', error)
          this.$message.error(`${this.fileList[index].title}上传失败`)
          this.fileList[index].error = true
          this.fileList[index].width = 100
        }
      })
    },
  },
  destroyed() {
    this.fileList.forEach(item => {
      if (item.iconClass) {
        window.URL.revokeObjectURL(item.iconClass)
      }
    })
  },
}
</script>

<style lang="scss" scoped>
.mian-color {
  border-top-left-radius: 7px;
  border-top-right-radius: 7px;
  border: 1px solid #e2e2e2;
  box-shadow: 0 0 5px #ccc;
}

.mian {
  width: 720px;
  position: fixed;
  inset: auto 60px 0px auto;
  display: block;
  visibility: visible;
  z-index: 2000;
  background-color: #fff;
  transition: all 0.5s linear;

  .dif-juspb-alic {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .head {
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    background-color: #fff;
    border-bottom: 1px solid #f0f5fc;
    height: 44px;
    line-height: 44px;
    font-weight: 200;
    padding: 0 2.7%;

    .head-title {
      color: rgb(134, 134, 134);

      .sp {
        margin-left: 5px;
        color: rgb(87, 168, 255);
      }
    }

    .icon-div {
      display: flex;
      align-items: center;

      .icon {
        color: #999;
        width: 40px;
        height: 30px;
        text-align: center;
        line-height: 30px;
      }

      .head-title {
        font-size: 14px;
      }

      .icon-guanbi {
        font-size: 14px;
      }
    }
  }

  .uploader-header {
    height: 35px;
    border-bottom: 1px solid #f2f6fd;
    line-height: 35px;
    color: #424e67;
    display: flex;
    font-size: 13px;
    padding-left: 3%;

    .file-name {
      width: 63%;
    }
    .file-text-width {
      width: 17%;
    }
    .file-stat {
      text-align: center;
    }
  }

  .uploader-scroll {
    overflow: scroll;
    overflow-x: hidden;
  }
  /* 定义滚动条样式 */
  .uploader-scroll::-webkit-scrollbar {
    width: 5px;
    background-color: #f3f3f35e;
    border-radius: 10px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  .uploader-scroll::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: rgba(247, 247, 247, 0.5);
  }
  /*定义滑块 内阴影+圆角*/
  .uploader-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // box-shadow: inset 0 0 0px rgba(255, 0, 0, 1);
    background-color: rgba(214, 214, 214, 0.5);
  }

  .uploader-list {
    width: 100%;
    height: 349px;
    position: relative;
    overflow: hidden;
    overflow-y: auto;

    .file-info {
      position: relative;
      width: 100%;
      height: 49px;
      border-bottom: 1px solid #f2f6fd;
      line-height: 49px;
      // padding-left: 3%;
      // display: flex;
      // align-items: center;

      .picture {
        position: absolute;
        width: 0%;
        height: 49px;
        background: #d5e8fc;
        transition: width 0.5s linear;
      }

      .file-xinxi {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        z-index: 99;
        padding-left: 3%;

        .file-icon {
          min-width: 46.5%;
          max-width: 46.5%;
          display: flex;
          align-items: center;

          .icon-svg-yasuobao {
            width: 2em;
            height: 2em;
          }

          .file-icon-title {
            width: 80%;
            @include text-d;
            font-size: 12px;
            margin-left: 10px;
          }

          .solist-img {
            width: 2rem;
            height: 2rem;
          }
        }

        .file-text-width {
          min-width: 12.7%;
          max-width: 12.7%;
          font-size: 12px;
          @include text-d;
        }

        .file-stat-icon {
          display: flex;
          justify-content: center;

          .icon-width {
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            // margin: 0 5px;

            .icon {
              color: #999;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
</style>